<template>
	<view >
		<text v-if="netSignal === 255" class="view_sign iconfont icon-wangkou text-xl" :style="{color:themeConfig.primaryColor}"></text>
		<view class="view_sign" v-else >
			<view class="view first-view" style="backgroundColor:#fff"
				:style="{backgroundColor:netSignal > -1 ? themeConfig.primaryColor:ghostWhite}"></view>
			<view class="view second-view" style="backgroundColor:#fff"
				:style="{backgroundColor: netSignal > 15 ? themeConfig.primaryColor:ghostWhite}"></view>
			<view class="view third-view" style="backgroundColor:#fff"
				:style="{backgroundColor:netSignal > 20 ? themeConfig.primaryColor:ghostWhite}"></view>
			<view class="view fourth-view" style="backgroundColor:#fff"
				:style="{backgroundColor:netSignal > 25 ? themeConfig.primaryColor:ghostWhite}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ghostWhite: ''
			}
		},
		name: 'Signal',
		props: {
			netSignal: {
				type: [String, Number],
				default: ''
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		mounted() {
			this.ghostWhite = this.$store.state.themeConfig.ghostWhite
		}
	}
</script>

<style scoped>
	.view_sign {
		display: flex;
		align-items: flex-end;
		height: 32rpx;
	}

	.view {
		width: 8rpx;
		/* border: 1rpx solid #666; */
	}

	.first-view {
		height: 10rpx;
	}

	.second-view {
		height: 17rpx;
		margin-left: 5rpx;
	}

	.third-view {
		height: 24rpx;
		margin-left: 5rpx;
	}

	.fourth-view {
		height: 32rpx;
		margin-left: 5rpx;
	}
</style>
